<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 工具栏 -->
      <page-tools :show-before="true">
        <!-- 上面内容 -->
        <template v-slot:before>{{ tipsInfo }}</template>
        <template v-slot:after>
          <el-button
            size="mini"
            type="danger"
            @click="$router.push('/salarys/setting')"
          >设置</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="
              $router.push(`/salarys/monthStatement?yearMonth=${yearMonth}`)
            "
          >{{ yearMonth }}报表</el-button>
        </template>
      </page-tools>
      <!--条件筛选-->
      <el-card>
        <el-form label-width="120px">
          <el-form-item label="聘用形式:">
            <el-checkbox-group v-model="formData.hireForm">
              <el-checkbox
                v-for="item in approvalsType"
                :key="item.id"
                :label="item.id"
              >
                {{ item.value }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="员工状态:">
            <el-checkbox-group v-model="formData.stateEmployees">
              <el-checkbox
                v-for="item in approvalsState"
                :key="item.id"
                :label="item.id"
              >
                {{ item.value }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="部门:">
            <el-checkbox-group v-model="formData.departments">
              <el-checkbox
                v-for="item in department"
                :key="item.id"
                :label="item.id"
              >
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </el-card>
      <!--数据列表-->
      <el-card class="hr-block">
        <el-table :data="list" style="width: 100%">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="username" label="姓名" width="100" />
          <el-table-column prop="mobile" label="手机" width="130" />
          <el-table-column prop="workNumber" label="工号" width="100" />
          <el-table-column
            prop="formOfEmployment"
            :formatter="formatEmployment"
            width="100"
            label="聘用形式"
          />
          <el-table-column prop="departmentName" label="部门" width="100" />
          <el-table-column prop="timeOfEntry" width="130" label="入职时间">
            <template v-slot:default="obj">
              {{ obj.row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="工资基数" width="100">
            <template slot-scope="scope">
              {{ scope.row.currentBasicSalary + scope.row.currentPostWage }}
            </template>
          </el-table-column>
          <el-table-column
            label="津贴方案"
            width="100"
          >通用方案</el-table-column>
          <el-table-column label="操作" width="260">
            <template slot-scope="scope" style>
              <!--工资基数大于o就显示调薪，否则就显示定薪-->
              <el-button
                v-if="
                  scope.row.currentBasicSalary + scope.row.currentPostWage > 0
                "
                size="mini"
                type="primary"
                @click="changeSalary('ChangeSalary', scope.row.id)"
              >调薪</el-button>
              <el-button
                v-else
                size="mini"
                type="danger"
                @click="sureSalary('SureSalary', scope.row.id)"
              >定薪</el-button>
              <el-button type="text" size="mini">
                <router-link
                  :to="{ path: '/salarys/details/' + scope.row.id }"
                >查看</router-link>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row
          type="flex"
          justify="center"
          style="height: 50px"
          align="middle"
        >
          <!--
        current-page:当前页面  prev：上一页  page-size：页面数量
        -->
          <el-pagination
            background
            layout="prev,pager,next"
            :total="page.total"
            :current-page="page.page"
            :page-size="page.pageSize"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
      <!--弹窗
        动态组件通过:is="currentComponent"来实现
        currentComponent可以包括    已注册组件的名字    一个组件的选项对象
      -->
      <el-dialog
        :title="topLobel"
        :visible.sync="centerDialogVisible"
        width="50%"
        left
      >
        <component
          :is="currentComponent"
          v-if="centerDialogVisible"
          ref="userInfo"
          :user-salary="selectedSalaryInfo"
          :user-id="selectUserId"
          @success="getSalarysList"
          @onDialogCancel="centerDialogVisible = false"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import employees from '@/api/constant/employees'
// 获取部门列表
import { getDepartments } from '@/api/departments'
import {
  getSalarysList,
  getSalaryDetail,
  getCompanySetting
} from '@/api/salarys'
// 引入定薪组件
import SureSalary from './components/sure-salarys'
// 引入调薪组件
import ChangeSalary from './components/change-salarys'
export default {
  name: 'UsersTableIndex',
  components: { SureSalary, ChangeSalary },
  data() {
    return {
      page: {
        total: 0,
        page: 1,
        pageSize: 10 // 默认是10个数据
      },
      list: [],
      approvalsType: employees.hireType,
      approvalsState: employees.workingState,
      department: [],
      yearMonth: '',
      formData: {
        hireForm: [],
        stateEmployees: [],
        departments: []
      },
      topLobel: '',
      centerDialogVisible: false,
      currentComponent: '',
      selectedSalaryInfo: {},
      selectUserId: null
    }
  },
  computed: {
    tipsInfo() {
      return `本月0：入职 0 离职 0 调薪 0 未定薪 0`
    }
  },
  created() {
    this.getDepartments()
    this.getSalarysList()
  },
  methods: {
    // 获取部门列表
    async getDepartments() {
      const res = await getDepartments()
      // console.log(res)
      // 结果赋值给department
      this.department = res.depts
    },
    // 获取员工信息
    async getSalarysList() {
      const res = await getSalarysList({ ...this.page, ...this.formData })
      console.log(res)
      const data = await getCompanySetting()
      this.yearMonth = data.dataMonth
      // rows的数据赋值给list
      this.list = res.rows
      this.page.total = res.total
    },
    // 列表页数的改变
    changePage(newPage) {
      this.page.page = newPage
      // 页面重新加载
      this.getSalarysList()
    },
    // 聘用形式判断进行文本显示
    formatEmployment(row) {
      const data = this.approvalsType.find(
        (item) => item.id === row.formOfEmployment.toString()
      )
      return data ? data.value : '未知'
    },
    // 定薪
    async sureSalary(key, userId) {
      this.topLobel = '定薪'
      this.currentComponent = key
      this.centerDialogVisible = true
      // 获取userId
      this.selectedSalaryInfo = await getSalaryDetail(userId)
      this.selectUserId = userId
    },
    // 调薪
    async changeSalary(key, userId) {
      this.topLobel = '调薪'
      this.currentComponent = key
      this.centerDialogVisible = true
      this.selectUserId = userId
      // 点击重新加载用户数据  渲染到页面上
      this.$nextTick(() => {
        this.$refs.userInfo.getUserDetailById(userId)
      })
      // 获取userId
      this.selectedSalaryInfo = await getSalaryDetail(userId)
    }
  }
}
</script>

<style>
</style>
